<template>
    <!--管理员-->
    <div class="role">
        <a-card>
            <div class="table">
                <Tables
                    ref="table"
                    :columns="columns"
                    :loadData="findDeliveryList"
                    :addData="addDelivery"
                    :editData="editDelivery"
                    :delData="delDelivery"
                    :formColumns="formColumns"
                    :rowSelection="{ selectedRowKeys, onChange: onChangeSelectRowKeys }"
                >
                    <template slot="button">
                        <a-button type="primary" @click="onClickExport">
                            配送明细
                        </a-button>
                    </template>
                    <template slot="status" slot-scope="{ text }">
                        <span>{{ status[text] }}</span>
                    </template>
                    <template slot="action" slot-scope="{ record }">
                        <a-button type="link" @click="onClickDeliveryOrder(record)">查看配送订单</a-button>
                    </template>
                </Tables>
            </div>
        </a-card>
        <Modal :visible.sync="visible" title="配送订单" width="90%">
            <Tables
                ref="table1"
                :columns="columns1"
                :loadData="findDeliveryGroupOrders"
                :addShow="false"
                :editShow="false"
                :delShow="false"
            >
                <template slot="names" slot-scope="{ record }">
                    <div class="name" v-for="(name, index) in record.names" :key="index">
                        {{ name }}
                    </div>
                </template>
                <template slot="address" slot-scope="{ record }">
                    <div class="address" v-for="(name, index) in record.address" :key="index">
                        <span @click="onClickAddress(record, index)"> {{ name }}</span>
                    </div>
                </template>
                <template slot="deliveryTime" slot-scope="{ record }">
                    <div class="address" v-for="(items, index) in record.deliveryTime" :key="index">
                        {{ items }}
                    </div>
                </template>
                <template slot="status" slot-scope="{ text }">
                    <span>{{ text == 1 ? '配送中' : '配送完成' }}</span>
                </template>
                <template slot="createTime" slot-scope="{ text }">
                    <span>{{ text | moment }}</span>
                </template>
                <template slot="action" slot-scope="{ record }">
                    <a-button type="link" @click="onClickDeliveryWay(record)">
                        查看配送路线
                    </a-button>
                    <a-button v-if="record.status === 1" type="link" @click="onClickDeliveryTransfer(record)">
                        订单转移
                    </a-button>
                    <a-button v-if="record.status === 1" type="link" @click="onClickDeliveryComplete(record)">
                        配送完成
                    </a-button>
                </template>
            </Tables>
        </Modal>
        <Modal :visible.sync="mapVisible" title="配送路线" width="80%">
            <!-- <el-amap ref="map" class="amap-box" :vid="'amap-vue'" :amap-manager="amapManager"></el-amap> -->
            <div id="container"></div>
            <div id="panel"></div>
            <!-- <div class="map-button">
                <a-button @click="onClickPolicy(1)">驾车路线</a-button>
                <a-button @click="onClickPolicy(2)">骑行路线</a-button>
            </div> -->
        </Modal>
        <Modal :visible.sync="completeVisible" title="配送完成" :ok="onConfirmComplete">
            <div>确认配送完成吗?</div>
        </Modal>

        <ModalForm
            :visible.sync="transferVisible"
            title="订单转移"
            :columns="transferColumns"
            :data.sync="transferForm"
            :ok="onConfrimOk"
        />
    </div>
</template>

<script>
import {
    addDelivery,
    delDelivery,
    deliveryComplete,
    editDelivery,
    findDeliveryAll,
    findDeliveryGroupOrders,
    findDeliveryList,
    transferDeliveryOrder
} from '@/api/delivery'
import rules from '@/validate/admin'
export default {
    name: 'DeliveryList',
    data() {
        return {
            visible: false,
            mapVisible: false,
            completeVisible: false,
            transferVisible: false,
            columns: [
                {
                    dataIndex: 'username',
                    title: '姓名',
                    align: 'center'
                },
                {
                    dataIndex: 'phone',
                    title: '手机号',
                    align: 'center'
                },
                {
                    dataIndex: 'status',
                    title: '状态',
                    align: 'center',
                    scopedSlots: { customRender: 'status' }
                }
            ],
            columns1: [
                {
                    dataIndex: 'id',
                    title: 'ID',
                    align: 'center'
                },
                {
                    dataIndex: 'names',
                    title: '商品名称',
                    align: 'center',
                    width: 300,
                    scopedSlots: { customRender: 'names' }
                },
                {
                    dataIndex: 'address',
                    title: '配送地址',
                    align: 'center',
                    width: 440,
                    scopedSlots: { customRender: 'address' }
                },
                {
                    dataIndex: 'deliveryTime',
                    title: '送达时间',
                    align: 'center',
                    width: 240,
                    scopedSlots: { customRender: 'deliveryTime' }
                },
                {
                    dataIndex: 'status',
                    title: '状态',
                    align: 'center',
                    width: 80,
                    scopedSlots: { customRender: 'status' }
                },
                {
                    dataIndex: 'createTime',
                    title: '创建时间',
                    align: 'center',
                    scopedSlots: { customRender: 'createTime' }
                }
            ],
            formColumns: {
                username: {
                    type: 'input',
                    label: '姓名'
                },
                phone: {
                    type: 'input',
                    label: '手机号'
                },
                status: {
                    type: 'select',
                    label: '状态',
                    options: [
                        {
                            name: '未配送',
                            value: 0
                        },
                        {
                            name: '配送中',
                            value: 1
                        },
                        {
                            name: '休息中',
                            value: 2
                        }
                    ]
                },
                id: {
                    type: 'hidden'
                }
            },
            transferColumns: {
                deliveryId: {
                    type: 'select',
                    label: '骑手',
                    options: [],
                    optionsLabel: {
                        name: 'username',
                        value: 'id'
                    }
                }
            },
            status: {
                0: '未配送',
                1: '配送中',
                2: '休息中'
            },
            form: {},
            transferForm: {},
            rules: rules,
            findDeliveryList,
            addDelivery,
            editDelivery,
            delDelivery,
            map: null,
            selectedRowKeys: [],
            policy: 1, // 1 驾车 2 骑行
            driving: null
        }
    },
    mounted() {},
    methods: {
        onClickDeliveryOrder(record) {
            this.visible = true
            this.form = record
            this.$nextTick(() => {
                this.$refs.table1.refresh()
            })
        },
        onChangeSelectRowKeys(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        async onClickExport() {
            let params = '1=1'
            if (this.selectedRowKeys.length === 0) {
                params += `&ids=${this.selectedRowKeys.join(',')}`
            }

            const url = `${process.env.VUE_APP_API_BASE_URL}/api/excel/exportDeliveryOrder?${params}`

            window.open(url)
        },
        onClickDeliveryWay(record) {
            this.mapVisible = true
            this.$nextTick(() => {
                const map = new window.AMap.Map('container', {
                    resizeEnable: true,
                    zoom: 13
                })
                this.map = map
                this.drivingPanel(record)
            })
        },
        onClickPolicy(type) {
            this.type = type
            if (this.type === 1) {
                this.drivingPanel()
            } else {
                this.ridingPanel()
            }
        },
        drivingPanel(record) {
            if (this.driving) this.driving.clear()
            this.driving = new window.AMap.Driving({
                // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                policy: window.AMap.DrivingPolicy.LEAST_TIME,
                map: this.map,
                panel: 'panel'
            })

            var startLngLat = record.lonlat.shift()

            var endLngLat = record.lonlat.pop()

            const opts = {
                waypoints: record.lonlat
            }

            this.driving.search(startLngLat, endLngLat, opts, function(status, result) {
                // 未出错时，result即是对应的路线规划方案
                console.log(status, result)
            })
        },
        onClickAddress(record, index) {
            const start = record.lonlat[index]
            const end = record.lonlat[index + 1]
            this.ridingPanel(start, end)
        },
        ridingPanel(startLngLat, endLngLat) {
            this.mapVisible = true
            this.$nextTick(() => {
                const map = new window.AMap.Map('container', {
                    resizeEnable: true,
                    zoom: 13
                })
                this.map = map
                if (this.driving) this.driving.clear()
                this.driving = new window.AMap.Riding({
                    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                    policy: window.AMap.DrivingPolicy.LEAST_TIME,
                    map: this.map,
                    panel: 'panel'
                })

                this.driving.search(startLngLat, endLngLat, function(status, result) {
                    console.log(status, result)
                })
            })
        },
        async onClickDeliveryComplete(record) {
            this.completeVisible = true
            this.form = record
        },
        async onClickDeliveryTransfer(record) {
            this.form = record
            this.transferVisible = true
            this.findDeliveryAll()
        },
        async onConfrimOk() {
            const params = {
                id: this.form.id,
                toDeliveryId: this.form.deliveryId,
                formDeliveryId: this.transferForm.deliveryId
            }
            const res = await transferDeliveryOrder(params)

            const { message } = res

            this.$message.success(message)

            this.visible = false

            this.$refs.table.refresh()
        },
        async onConfirmComplete() {
            const res = await deliveryComplete({ deliveryGroupId: this.form.id })

            const { message } = res

            this.$message.success(message)

            this.$refs.table.refresh()
        },
        async findDeliveryGroupOrders(params) {
            const res = await findDeliveryGroupOrders({ ...params, ...this.form })
            return res
        },
        async findDeliveryAll() {
            const res = await findDeliveryAll()

            const { data } = res

            this.$set(this.transferColumns.deliveryId, 'options', data)
        }
    }
}
</script>

<style lang="less" scoped>
.amap-wrapper {
    width: 100%;
    height: 500px;
}
#container {
    width: 100%;
    height: 500px;
}
.name + .name,
.address + .address {
    margin-top: 10px;
}
.address {
    span {
        cursor: pointer;
        color: #1890ff;
    }
}
.map-button {
    position: absolute;
    top: 90px;
    left: 40px;
    v-deep .ant-button {
        margin-left: 10px;
    }
}
</style>
